<template>
  <div style="position: fixed;z-index: 100;">
    <div
      style="width:540px;right:10px;position: fixed;  bottom:5px;"
     
    >
<div class="panel panel-info b-t-4x">
        <div class="panel-body">
          <div
            id="charts-r2"
            :style="{height:(chartsrHeight-100)+'px'}"
          ></div>
        </div>
      </div>
      <div class="panel panel-info b-t-4x">
        <div class="panel-body">
          <div
            id="charts-r1"
            :style="{height:chartsrHeight+'px'}"
          ></div>
        </div>
      </div>
    </div>
    <TitleLenged
      :isShow="isShowTitle"
      :titleText="titleText"
    ></TitleLenged>
    <timeline
      v-if="showSwiper"
      :swiperSlides="yearlist"
      :swiperOption="swiperOption"
      @watchTimeLine="timelineOnClick"
    ></timeline>
    <CostomProgress
      :title="c_title"
      :modal2Visible="c_visable"
      :percent="c_percent"
    ></CostomProgress>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
import timeline from '../timeline/timeline.vue';
import TitleLenged from '../mainContent/TitleLenged.vue';
import CostomProgress from '../progress/index.vue';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'R10103',
  computed: {
    ...mapGetters(['map', 'contentHeight'])
  },
  data() {
    return {
      //是否显示时间轴
      showSwiper: false,
      //时间轴中的数据
      yearlist: [],
      //时间轴中swiperOption
      swiperOption: {
        slidesPerView: 15,
        spaceBetween: 0,
        slidesPerGroup: 15,
        loop: true,
        loopFillGroupWithBlank: true,

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      //传递到时间轴组件中的数据
      swiperSlides: [],

      //当前选中的时间
      currentYear: '',
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,
      //30年矿区本地数据
      mineLocalData: null,
      chartsrHeight: 400,
      chartdisplay:{display:'none'},
      chartInstance:null,
      chartInstance2:null,
      
      
    };
  },
  components: {
    TitleLenged,
    timeline,
    CostomProgress
  },
  mounted: function() {
    /**
     * 设置图表高度
     */
    this.chartsrHeight = this.contentHeight /2;
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
      this.c_title = '加载中';
      this.c_visable = true;

      //加载矿区wfs图层
      let params = {
        this: this,
        url:config.webapiUrl +'/minechange/getAreaGroupByYear',
        successFunc: response => {
          let that = this;
          that.mineLocalData = response.data.data;
          //console.log(response.data.data);
          // //过滤矿区信息
          let tempyear = [];
          let arrealst = [];
          _.forEach(response.data.data, function(value) {
            tempyear.push(value.jyyear);
            arrealst.push(_.round(value.area/1000000, 4));
          });
          
          let areaAllList=[];
          for(var i=0;i<arrealst.length;i++){
            let sums=0;
            for(var j=0;j<=i;j++){
              sums+=arrealst[j];
            }
            areaAllList.push(sums);
          }
          // _.forEach(tempyear, function(value) {
          //   let valitem = _.find(arrealst, function(o) {
          //     return o.year == value;
          //   });
          //   let area = valitem.areaval;
          //   let area2 = 0;

          //   areaList.push(_.round(area/1000000, 4));
          //   areaAllList.push(_.round(area2/1000000, 4));
          // });
         
          this.yearlist = tempyear;
          this.c_title = '加载中';
          this.c_visable = false;

          this.showSwiper = true;
          this.chartdisplay.display='block';
          
          this.initCharts(tempyear,arrealst,areaAllList);
          
        }
      };
      commonOper.HttpGet(params);
    } else {
      this.$router.push({
        //核心语句
        path: 'R101.html' //跳转的路径
      });
    }
  },
  methods: {
    ...mapActions(['changeMap', 'changeLengedTitle']),
    timelineOnClick(item) {
      this.c_title = '加载中';
      this.c_visable = true;
      this.currentYear = item;

      // let params = {
      //   map: this.map,
      //   mapfile: mapfileName,
      //   layerName: 'wuhai_LandSet_' + this.currentYear,
      //   coordinate: [36401859.825, 4371259.97]
      // };
      // let map = mapOper.loadRasterLayer(params);
      // this.changeMap({ map: map });

      // //加载矿区数据
      // let yearfeatures = _.filter(this.mineLocalData.features, function(o) {
      //   return o.properties.year == item;
      // });

      // let jsonFeature = {
      //   type: 'FeatureCollection',
      //   name: item + '_mine',
      //   features: yearfeatures
      // };
      // let jsonmap = mapOper.loadGeoJsonLayer(this.map, 'mine30', jsonFeature);
      // this.changeMap({ map: jsonmap });
      //加载矿区wfs图层
      let params = {
        this: this,
        url:
          config.webapiUrl +
          '/minechange/getFeaturesByYear?jyyear='+ this.currentYear,
        successFunc: response => {
          let that = this;
          //that.mineLocalData = response.data.data;
          let style=mapOper.getGeoJsonStyle('mine');
          let wfsParams = {
            map: that.map,
            jsonData: response.data.data,
            style:style,
            styleFunc:null,
            selectFunc: null,
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });
          that.c_title = '加载中';
          that.c_visable = false;
          this.isShowTitle = true;

          this.titleText = '乌海' + this.currentYear + '年提取矿区数据';
    
        }
      };
      commonOper.HttpGet(params);
      
    //   let lsTitle = { isShow: true, title: '123' };
    //   this.changeLengedTitle({ lengedTitle: lsTitle });
    },
    //加载图表
    initCharts(xAxisData,areaList,areaAllList) {
        

      let optionr1 = {
        color:['#e11144'],
        title: {
          text: '乌海历年新增矿区面积变化',
          subtext: '数据来源--遥感数据解译'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增矿区面积']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} K㎡'
          }
        },
        series: [
          {
            name: '新增矿区面积',
            type: 'line',
            data: areaList,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      };
      this.chartInstance=this.$echarts.init(document.getElementById('charts-r1'));
      
      this.chartInstance.setOption(optionr1, true);

      window.onresize = this.chartInstance.resize;

      let optionr2 = {
        color:['#e11144'],
        title: {
          text: '乌海历年矿区面积变化',
         
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['矿区面积']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} K㎡'
          }
        },
        series: [
          {
            name: '矿区面积',
            type: 'line',
            data: areaAllList,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      };
      this.chartInstance2=this.$echarts.init(document.getElementById('charts-r2'));
      
      this.chartInstance2.setOption(optionr2, true);

      window.onresize = this.chartInstance2.resize;
    }
  }
};
</script>

